<template>
  <el-icon @click="() => this.$router.back()" size="30" style="cursor: pointer; z-index: 1">
    <Back/>
  </el-icon>
  <div class="privacy-container">
    <el-container>
      <el-main>
        <el-card class="privacy-card scrollable-content" shadow="hover">
          <h1 class="privacy-title">柿子文档隐私协议</h1>
          <p class="privacy-content ti">
            感谢您选择使用柿子文档（以下称“本平台”）。本隐私协议是您与地球柿子科技有限公司（以下称“柿子科技”）之间的协议，用以保护您的隐私权益。在使用本平台之前，请仔细阅读并理解以下隐私协议：
          </p>
          <!-- 添加更多隐私协议内容 -->
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>

          <p class="privacy-content">
            如有疑问或需要进一步了解我们的隐私协议，请联系我们。
          </p>

          <p class="privacy-content">
            <b>特别提醒：本平台为Demo项目，仅供学习参考，不得用于商业用途。如未邀请，请勿使用本平台。</b>
          </p>

          <p class="privacy-content">
            最后更新：2023年8月26日
          </p>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {Back} from "@element-plus/icons-vue";

export default {
  name: 'Privacy',
  components: {Back},
};
</script>

<style scoped>
/* 自定义样式 */
.privacy-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffe6b3; /* 浅橘黄色背景 */
}

.privacy-card {
  text-align: center;
  padding: 20px;
  background-color: #fff8e1; /* 浅橘黄色卡片背景 */
}

.privacy-title {
  color: #ff9800; /* 橙色文字颜色 */
  font-size: 28px;
  margin-bottom: 20px;
}

.privacy-content {
  color: #555;
  max-width: 600px; /* 设置最大宽度为 600px */
  margin: 0 auto; /* 居中显示 */
  text-align: left;
}

.ti {
  text-indent: 2em; /* 设置缩进为 2 个字母的宽度 */
}

.scrollable-content {
  max-height: calc(100vh - 200px); /* 调整为适当的高度，确保内容可滚动 */
  overflow-y: auto; /* 显示滚动条，只在内容超出容器高度时出现 */
  padding: 20px; /* 添加内边距以避免内容被遮挡 */
}
</style>
